<template>
    <main>
        <div class="ml-wrapper ml-buy">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9 left">
                        <div class="tab row container-row">
                            <div class="col-6 tab-li" :class="key === showIndex ? 'active' : ''"
                                 v-for="(item, key) in tab"
                                 :key="key" @click="changTab(key)">
                                <img
                                    :src="item.path"> <span class="tab-title">{{ item.title }}</span> <span
                                class="tab-tips">{{ item.desc }}</span>
                            </div>
                        </div>

                        <div class="plan-cards-container row ">
                            <div class="col-6 col-lg-3" v-for="(item, key) in tab[showIndex].meal" :key="key">
                                <div class="plan-card"
                                     :class="selectIndex === key ? showIndex === 0 ? 'plan-card-selected' : 'plan-card-selected-game' : ''"
                                     @click="changeCard(key)">
                                    <div class="title">
                                        <h5>{{ item.time }}{{$t('price_day')}}</h5>
                                        <div class="dis-price" v-show="item.discount">{{ item.discount }}% {{$t('price_off')}}</div>
                                    </div>
                                    <div class="total-price nbfont"><small>¥</small>{{ item.money }}</div>
                                    <div class="month-price">
                                        <small>¥</small>
                                        <span class="ave-price">{{ item.singlePrice }}</span>
                                        <span class="ave">/30天</span>
                                    </div>
                                    <span class="promo-days"
                                          v-if="item.gift">{{
                                            Number.parseInt(item.gift) ? `新人加送 ${item.gift}天` : `${item.gift}`
                                        }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="toolbar">
                            <div class="vip-des">
                                <div class="turbo-desc" v-for="(item, key) in more ? vipDesc.vip : vipDesc.vipGame"
                                     :key="key">
                                    <i :class="item.icon"></i>
                                    <span>{{ item.title }}</span>
                                </div>
                            </div>
                            <div class="switch-btn showmore"><span>{{$t('price_more')}}</span>
                                <div class="switch-container">
                                    <label class="switch"><input type="checkbox" id="showmore-state"
                                                                 class="switch-input" v-model="more"
                                                                 @change="changeMore(more)">
                                        <span class="switch-label"></span>
                                        <span class="switch-handle"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="payment-card">
                            <div class="account-info"><span class="lable">当前账号:</span> <span class="account"></span>
                            </div>
                            <div class="payment-section coupon-section">
                                <div class="label"><h4>{{$t('price_coupon_title')}}</h4>
                                    <div class="coupon-wrapper"><i class="ri-coupon-line icon-coupon"></i> <span
                                        id="coupon-open">1{{$t('price_coupon_desc')}}</span>
                                    </div>
                                </div>
                                <div id="coupon-section" class="">
                                    <div class="content">
                                        <div class="coupon-card-item">
                                            <div
                                                class="coupon-cards coupon-card-disable  coupon-card-cut">
                                                <div class="coupon-card-left">
                                                    <span class="coupon-value">首月半价</span>
                                                </div>
                                                <div class="coupon-card-right">
                                                    <span class="coupon-des">仅限首单</span>
                                                    <span class="coupon-due">今天到期</span>
                                                    <span class="coupon-fit-message">30-30天可用</span>
                                                </div>
                                            </div>


                                            <div class="coupon-cards   coupon-card-off coupon-card-checked">
                                                <div class="coupon-card-left">
                                                    <span class="coupon-value">85折</span>
                                                </div>
                                                <div class="coupon-card-right">
                                                    <span class="coupon-des">年付特惠-限时</span>
                                                    <span class="coupon-due">今天到期</span>
                                                    <span class="coupon-fit-message">360-720天可用</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="promo-input" class="promo-icon-success"><input type="text"
                                                                                                id="promo-code"
                                                                                                :placeholder="$t('price_placeholder')"
                                                                                                class="input-success">
                                            <button type="button" id="promo-code-button">{{$t('price_apply')}}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="payment-section method">
                                <div class="label"><h4>{{$t('price_pay_method')}}</h4></div>
                                <div class="payment-method">
                                    <div class="payment-method-item wechat"
                                         :class="key === form.pay ? 'payment-method-item-checked' : ''"
                                         v-for="(item, key) in payMethod" :key="key" @click="form.pay = key">
                                        <i :class="item.icon"></i>
                                        <span>{{ item.title }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="payment-section price-list">
                                <div class="item">
                                    <div class="title">Malus VIP&nbsp;<span id="vip-days">360</span> 天</div>
                                    <span id="price-origin" class="price-value">¥ 504</span></div>
                                <div class="item">
                                    <div class="title">{{$t('price_time')}}<span id="discount-tag">29%</span></div>
                                    <span id="price-plan-discount" class="price-value">-¥ 144</span></div>
                                <div class="item">
                                    <div class="title">{{$t('price_coupon_discount')}}<span id="promo-discount-ratio">15%</span></div>
                                    <span id="price-code-discount" class="price-value">-¥ 54</span></div>
                                <div class="final-price"><span>{{$t('price_total')}}</span>
                                    <div class="price-value-total">
                                        <div class="price-total-small">（ {{$t('price_CNY')}}）</div>
                                        <div><span id="total-value-unit">¥ </span> <span id="total_value">306</span>
                                        </div>
                                    </div>
                                </div>
                                <div id="payment-suggestion-container" style="display: none;">
                                    <div id="payment-suggestion" class="payment-suggestion"><span
                                        id="payment-suggestion-text"></span> <span id="payment-suggestion-btn"
                                                                                   event="Buy Upgrade Btn"></span></div>
                                </div>
                            </div>
                            <a class="lag-tips" href="https://getmalus.com/support/53" target="blank"></a>
                            <div class="payment-signin"><a data-href="login" class="payment-btn signin"> {{$t('price_login_buy')}}</a> <a
                                data-href="signup" class="payment-btn signup"> {{$t('price_signup')}}</a></div>
                            <div class="payment-submit" style="display: none;">
                                <button id="submit" event="Pay Submit Btn"> {{$t('price_login_buy')}}</button>
                                <div class="tips">
                                    <div class="item"><i class="remixicon-lock-2-line"></i> <span>支付过程已加密，请放心购买</span>
                                    </div>
                                </div>
                            </div>
                            <div class="agreement"><i class="ri-checkbox-circle-line"></i> <span>{{$t('signup_form_1')}} <a
                                href="/terms">{{$t('signup_form_2')}}</a> {{$t('signup_form_3')}} <a href="/privacy">{{$t('signup_form_4')}}</a></span></div>
                        </div>
                    </div>

                    <div class="col-lg-3 right">
                        <div class="buy-compare-btn open-feature" @click="featureDetailShow = true"><i
                            class="ri-list-check"></i><span>会员权益对比表</span> <i
                            class="ri-arrow-right-s-line"></i></div>
                        <div class="banner">
                            <div class="title"><img :src="vipIcon" alt="vip">{{$t('price_malus_vip_1')}}</div>
                            <div class="buy-limit-time"><span>{{$t('price_malus_vip_2')}}</span> <span>{{$t('price_malus_vip_3')}}</span></div>
                            <div class="buy-timer-banner" style="display: none;"><span>限时优惠购买</span>
                                <div class="buy-timer nbfont">00:00:00</div>
                            </div>
                        </div>
                        <div class="feature turbo-feature">
                            <div class="title" @click="featureDetailShow = true">
                                <div>{{ showIndex ? $t('price_standard_title_1') : $t('price_standard_title_2') }}{{$t('price_standard_title')}}</div>
                                <span id="open-feature" class="open-feature swit">{{$t('price_standard_desc')}} <i
                                    class="ri-arrow-right-circle-fill"></i></span></div>
                            <div class="feature-list">
                                <div class="item" v-for="(item, key) in showIndex ? feature.gameVip : feature.vip"
                                     :key="key"><img :src="item.path"
                                                     alt="feature"><h5>
                                    {{ item.title }}</h5><span>{{ item.desc }}</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <user-comment></user-comment>
        <FeatureDetail v-show="featureDetailShow" @closeModal="featureDetailShow = false"></FeatureDetail>
    </main>
</template>

<script>
import UserComment from "@/components/UserComment";
import FeatureDetail from "@/components/FeatureDetail";

export default {
    name: "Buy",
    components: {FeatureDetail, UserComment},
    data() {
        return {
            tab: [
                {
                    title: this.$t('price_standard_vip'),
                    desc:this.$t('price_standard_vip_desc'),
                    path: require('@/assets/vip.2e8d3.svg'),
                    meal: [
                        {
                            time: 360,
                            discount: 29,
                            money: 360,
                            singlePrice: 30,
                            gift: 60
                        },
                        {
                            time: 180,
                            discount: 13,
                            money: 220,
                            singlePrice: 37,
                            gift: 30
                        },
                        {
                            time: 90,
                            discount: 5,
                            money: 120,
                            singlePrice: 40,
                            gift: 14
                        },
                        {
                            time: 30,
                            money: 42,
                            singlePrice: 42,
                        }
                    ]
                },
                {
                    title: this.$t('price_game_vip'),
                    desc: this.$t('price_game_vip_desc'),
                    path: require('@/assets/vip_game.b0048.svg'),
                    meal: [
                        {
                            time: 360,
                            discount: 31,
                            money: 600,
                            singlePrice: 50,
                            gift: 60
                        },
                        {
                            time: 180,
                            discount: 15,
                            money: 370,
                            singlePrice: 62,
                            gift: 30
                        },
                        {
                            time: 90,
                            discount: 3,
                            money: 210,
                            singlePrice: 70,
                            gift: 14
                        },
                        {
                            time: 30,
                            money: 72,
                            singlePrice: 72,
                        }
                    ]
                }
            ],
            vipDesc: {
                vip: [
                    {
                        icon: 'ri-shield-flash-line',
                        title: this.$t('price_boost')
                    },
                    {
                        icon: 'ri-shield-star-line',
                        title: this.$t('price_back')
                    }
                ],
                vipGame: [
                    {
                        icon: 'ri-vip-crown-line',
                        title: this.$t('price_game_boost')
                    },
                    {
                        icon: 'ri-shield-star-line',
                        title: this.$t('price_game_back')
                    }
                ]
            },
            feature: {
                vip: [
                    {
                        path: require('@/assets/ic40_feature_1.d1826.svg'),
                        title: this.$t('price_standard_li_1_title'),
                        desc: this.$t('price_standard_li_1_desc'),
                    },
                    {
                        path: require('@/assets/ic40_feature_2.c3393.svg'),
                        title: this.$t('price_standard_li_2_title'),
                        desc: this.$t('price_standard_li_2_desc'),
                    },
                    {
                        path: require('@/assets/ic40_feature_3.29207.svg'),
                        title: this.$t('price_standard_li_3_title'),
                        desc: this.$t('price_standard_li_3_desc'),
                    },
                    {
                        path: require('@/assets/ic40_feature_4.4160f.svg'),
                        title: this.$t('price_standard_li_4_title'),
                        desc: this.$t('price_standard_li_4_desc'),
                    }
                ],
                gameVip: [
                    {
                        path: require('@/assets/ic40_feature_5.c308b.svg'),
                        title: this.$t('price_standard_game_li_1_title'),
                        desc: this.$t('price_standard_game_li_1_desc'),
                    },
                    {
                        path: require('@/assets/ic40_feature_6.2cd4e.svg'),
                        title: this.$t('price_standard_game_li_2_title'),
                        desc: this.$t('price_standard_game_li_2_desc'),
                    },
                    {
                        path: require('@/assets/ic40_feature_7.3265b.svg'),
                        title: this.$t('price_standard_game_li_3_title'),
                        desc: this.$t('price_standard_game_li_3_desc'),
                    },
                    {
                        path: require('@/assets/ic40_feature_8.0f5c9.svg'),
                        title: this.$t('price_standard_game_li_4_title'),
                        desc: this.$t('price_standard_game_li_4_desc'),
                    }
                ],
            },
            payMethod: [
                {
                    title: '微信支付',
                    icon: 'ri-wechat-fill'
                },
                {
                    title: '支付宝支付',
                    icon: 'ri-alipay-fill'
                },
                {
                    title: 'Paypal支付',
                    icon: 'ri-paypal-fill',
                    desc: '支持信用卡'
                }
            ],
            more: false,
            showIndex: 0,
            selectIndex: 0,
            featureDetailShow: false,
            vipIcon: require('@/assets/vip.ee38f.png'),
            form: {
                pay: 0
            }
        }
    },
    methods: {
        changeMore(e) {
            if (e) {
                let vipArray = [
                    {
                        time: 720,
                        discount: 41,
                        money: 600,
                        singlePrice: 25,
                        gift: 90,
                        more: true
                    },
                    {
                        time: 1080,
                        discount: 50,
                        money: 760,
                        singlePrice: 21,
                        gift: '最便宜',
                        more: true
                    }
                ]
                let vipGameArray = [
                    {
                        time: 720,
                        discount: 44,
                        money: 980,
                        singlePrice: 41,
                        gift: 90,
                        more: true
                    },
                    {
                        time: 1080,
                        discount: 51,
                        money: 1290,
                        singlePrice: 36,
                        gift: '最便宜',
                        more: true
                    }
                ]
                vipArray.forEach((item, key) => {
                    this.tab[0].meal.unshift(item)
                })
                vipGameArray.forEach((item, key) => {
                    this.tab[1].meal.unshift(item)
                })
            } else {
                this.tab[0].meal.splice(0, 2)
                this.tab[1].meal.splice(0, 2)
            }
        },
        changTab(key) {
            this.showIndex = key
        },
        changeCard(key) {
            this.selectIndex = key
        }
    }
}
</script>

<style scoped lang="scss">
@media (max-width: 767.98px) {
    .container-row{
        margin: 0!important;
    }
    .toolbar {
        display: none !important;
    }
    .ml-buy {
        margin-top: 80px !important;

        .tab-tips {
            display: none !important;
        }
    }
    .payment-card {
        padding: 0 !important;
        border: none !important;
    }
    .plan-card {
        margin-top: 24px !important;
    }
    .payment-section {
        width: 100% !important;
    }
    .coupon-section {
        .coupon-cards {
            width: 100% !important;
        }
    }
    #promo-input {
        #promo-code {
            width: 65% !important;
        }

        button {
            width: 35% !important;
        }
    }
    #promo-input:before {
        display: none !important;
    }
    .payment-method {
        flex-direction: column;

        .payment-method-item {
            width: 100% !important;
            margin-bottom: 16px;
            height: 50px !important;
        }
    }

    .payment-signin {
        flex-direction: column;
        align-items: flex-start;
        width: 100% !important;

        a {
            width: 100% !important;
            padding: 18px 60px;
            font-size: 16px;
            margin-bottom: 24px;
        }
    }
    .right {
        margin: 40px 0!important;
        .banner {
            display: none!important;
        }
        .feature {
            margin-bottom: 60px!important;
            .feature-list {
                flex-direction: row!important;
                flex-wrap: wrap;
                padding: 0 0 40px!important;
                min-height: initial;
                .item {
                    margin-top: 40px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 50%;
                }
            }
        }
    }
}

main {
    .ml-buy {
        margin-top: 130px;

        .left {
            .tab {
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid #E8E7F8;
                margin-bottom: 24px;

                .tab-li {
                    flex: 1;
                    display: flex;
                    height: 60px;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;

                    img {
                        width: 24px;
                        height: 24px;
                        margin-right: 6px;
                        margin-top: 2px;
                    }

                    .tab-title {
                        font-weight: 500;
                        font-size: 18px;
                        display: flex;
                        align-items: center;
                        color: #222;
                    }

                    .tab-tips {
                        font-size: 13px;
                        display: flex;
                        align-items: center;
                        color: #333;
                        margin-left: 6px;
                    }
                }

                .tab-li:first-child {
                    border-right: 1px solid #E8E7F8;
                }

                .active {
                    box-shadow: inset 0 3px 0 #ffae14;
                    background: #FAFAFF;
                }
            }

            .plan-cards-container {
                .col:first-child {
                    padding-left: 0;
                }

                .col:last-child {
                    padding-right: 0;
                }

                .plan-card {
                    justify-content: center;
                    align-items: center;
                    border: 1px solid #E8E7F8;
                    border-radius: 4px;
                    position: relative;
                    cursor: pointer;
                    transition: bolder .2s ease;
                    padding-bottom: 24px;
                    min-height: 136px;
                    display: flex;
                    flex-direction: column;

                    .title {
                        margin-top: 20px;
                        display: flex;
                        align-items: center;

                        h5 {
                            font-size: 14px;
                            color: #7b7b7b;
                            font-weight: 400;
                        }

                        .dis-price {
                            font-size: 14px;
                            font-weight: 500;
                            color: #07BB07;
                            border-left: 2px solid #E8E7F8;
                            padding-left: 4px;
                            margin-left: 4px;
                            line-height: 12px;
                        }
                    }

                    .total-price {
                        margin-top: 20px;
                        font-size: 28px;
                        font-weight: 500;
                        color: #333;

                        small {
                            font-size: 12px;
                            transform: translateY(-1px);
                            display: inline-block;
                            margin-right: 4px;
                        }
                    }

                    .month-price {
                        margin-top: 12px;
                        color: #333;
                        font-size: 13px;

                        small {
                            font-size: 80%;
                        }

                        .ave-price {
                            font-size: 13px;
                            font-weight: 700;
                        }

                        .ave {
                            font-size: 13px;
                            color: #7b7b7b;
                        }
                    }

                    .promo-days {
                        position: absolute;
                        padding: 5px 10px;
                        background: #FF5569;
                        font-size: 12px;
                        color: #fff;
                        font-weight: 500;
                        border-radius: 12px 0;
                        top: -14px;
                    }
                }

                .plan-card-selected {
                    background: #FBFBFF;
                    box-shadow: inset 0 0 0 2px #4d55e8;
                    border-color: #fff;
                }

                .plan-card-selected::before {
                    content: "";
                    display: block;
                    background: url(../assets/active_tag.d41ff.png) no-repeat;
                    width: 26px;
                    height: 26px;
                    background-size: contain;
                    position: absolute;
                    left: 0;
                    top: 0;
                }

                .plan-card-selected-game {
                    background: #FBFBFF;
                    box-shadow: inset 0 0 0 2px #ffae14;
                    border-color: #fff;
                }

                .plan-card-selected-game::before {
                    content: "";
                    display: block;
                    background: url(../assets/active_tag_game.b53ed.png) no-repeat;
                    width: 26px;
                    height: 26px;
                    background-size: contain;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }

            .toolbar {
                margin-top: 26px;
                display: flex;
                align-items: center;
                background: #FAFAFF;
                border-radius: 4px;
                height: 48px;
                padding: 0 0 0 12px;

                .vip-des {
                    padding-left: 2px;
                    display: flex;
                    flex: 1;

                    .game-desc {
                        display: flex;
                        align-items: center;
                        margin-right: 16px;

                        i {
                            font-size: 20px;
                            margin-right: 6px;
                            color: #ff960c;
                        }
                    }

                    .turbo-desc {
                        display: flex;
                        align-items: center;
                        margin-right: 24px;
                        font-size: 14px;
                        color: #111;

                        i {
                            font-size: 20px;
                            color: #4D55E8;
                            margin-right: 4px;
                        }
                    }
                }

                .showmore {
                    display: flex;
                    height: 48px;
                    align-items: center;
                    padding: 0 20px;
                    border-left: 1px solid #f0effd;

                    span {
                        font-size: 12px;
                        margin-right: 8px;
                    }

                    .switch {
                        margin: 0 auto;
                        position: relative;
                        display: inline-block;
                        vertical-align: top;
                        width: 38px;
                        height: 24px;
                        padding: 0;
                        background-color: #E8E7F8;
                        border-radius: 18px;
                        cursor: pointer;

                        input {
                            position: absolute;
                            top: 0;
                            left: 0;
                            opacity: 0;
                        }

                        .switch-input:checked ~ .switch-label {
                            display: block;
                            width: 100%;
                            height: 100%;
                            background: #4D55E8;
                            border-radius: 100px;
                        }

                        .switch-input:checked ~ .switch-handle {
                            left: 20px;
                            background: #fff;
                        }

                        .switch-label {
                            font-size: 12px;
                            margin-right: 8px;
                        }

                        .switch-handle {
                            font-size: 12px;
                            margin-right: 8px;
                            position: absolute;
                            top: 5px;
                            left: 3px;
                            width: 14px;
                            height: 14px;
                            border-radius: 10px;
                            background: #fff;
                            box-shadow: 0 2px 2px rgb(0 0 0 / 10%);
                            transition: left .15s ease-out;
                        }
                    }
                }
            }

            .payment-card {
                margin-top: 28px;
                border: 1px solid #E8E7F8;
                border-radius: 4px;
                padding: 0 32px 56px;

                .account-info {
                    margin-top: 32px;
                    align-items: center;
                    background: #f7f7ff;
                    border-radius: 0 4px 4px 0;
                    padding: 0 10px;
                    height: 40px;
                    width: 65%;
                    display: none;
                    border-left: 3px solid #4D55E8;

                    .lable {
                        font-size: 14px;
                        color: #333;
                    }

                    .account {
                        margin-left: 8px;
                        font-size: 14px;
                        font-weight: 500;
                    }
                }

                .payment-section {
                    margin: 28px 0;
                    width: 65%;

                    .label {
                        display: flex;
                        align-items: center;

                        h4 {
                            font-size: 13px;
                            font-weight: 400;
                            color: #222;
                            margin-right: 8px;
                            display: flex;
                            align-items: center;
                        }

                        .coupon-wrapper {
                            font-size: 13px;
                            display: flex;
                            align-items: center;

                            i {
                                font-size: 16px;
                                color: #4D55E8;
                            }

                            .coupon-open {
                                margin-left: 4px;
                                font-size: 13px;
                                cursor: pointer;
                                transition: all .2s ease;
                                color: #7b7b7b;
                                display: flex;
                                align-items: center;
                            }
                        }
                    }

                    #coupon-section {
                        align-items: center;
                        justify-content: center;

                        .content {
                            padding: 0;
                            border-radius: 6px;
                            position: relative;

                            .coupon-card-item {
                                margin-top: 16px;
                                display: flex;
                                align-items: center;
                                flex-wrap: wrap;
                                justify-content: space-between;

                                .coupon-cards {
                                    display: flex;
                                    align-items: center;
                                    width: 48%;
                                    height: 74px;
                                    margin-bottom: 24px;
                                    border-radius: 4px;
                                    border: 1px solid #e9eaf5;
                                    cursor: pointer;

                                    .coupon-card-left {
                                        background: url(../assets/buy_coupon_gray.png) center no-repeat;
                                        background-size: cover;
                                        cursor: not-allowed;
                                        background-position-x: -5.1px;
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                        width: 80px;
                                        height: 74px;
                                        color: #fff;
                                        flex-shrink: 0;
                                        border-radius: 4px 0 0 4px;
                                        margin-left: -1px;

                                        .coupon-value {
                                            padding: 0 20px;
                                            font-size: 16px;
                                            line-height: 1.3;
                                            font-weight: 500;
                                        }
                                    }

                                    .coupon-card-right {
                                        cursor: not-allowed;
                                        filter: grayscale(.9);
                                        padding-right: 14px;
                                        display: flex;
                                        flex-direction: column;
                                        margin-left: 8px;
                                        width: 100%;
                                        height: 74px;

                                        .coupon-des {
                                            color: #7b7b7b;
                                            font-size: 13px;
                                            font-weight: 500;
                                            margin-top: 8px;
                                        }

                                        .coupon-due {
                                            font-size: 12px;
                                            color: #ff960c;
                                            padding-top: 8px;
                                        }

                                        .coupon-fit-message {
                                            font-size: 12px;
                                            color: #7b7b7b;
                                            border-top: 1px dashed #e6e6e6;
                                            margin-top: auto;
                                            height: 24px;
                                            display: flex;
                                            align-items: center;
                                        }
                                    }
                                }

                                .coupon-card-checked {
                                    border: 1px solid #ffb50c;
                                    background: #FFF8EE;
                                }

                                .coupon-card-checked:before {
                                    content: "";
                                    display: block;
                                    position: absolute;
                                    right: -1px;
                                    bottom: -2px;
                                    z-index: 9999;
                                    font-size: 12px;
                                    color: #fff;
                                    transform: scale(.8);
                                }

                                .coupon-card-off {
                                    .coupon-card-left {
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                        width: 80px;
                                        height: 74px;
                                        color: #fff;
                                        flex-shrink: 0;
                                        border-radius: 4px 0 0 4px;
                                        background: url(../assets/coupon_new_bg.cd0b4.png) center no-repeat;
                                        background-size: cover;
                                        background-position-x: -5.6px;
                                        margin-left: -1px;
                                    }
                                }
                            }

                            #promo-input {
                                display: flex;
                                align-items: center;
                                position: relative;

                                .input-success {
                                    border-color: #888bf5;
                                    margin-top: 0;
                                    position: relative;
                                    border: 1px solid #f0f1ff;
                                    border-radius: 4px;
                                    font-size: 14px;
                                    line-height: 20px;
                                    padding: 8px 12px;
                                    color: #333;
                                    font-weight: 500;
                                    width: 85%;
                                    letter-spacing: 1.2px;
                                    text-transform: uppercase;
                                    height: 40px;
                                }

                                #promo-code-button {
                                    background: #ebebff;
                                    border: 1px solid #ebebff;
                                    border-radius: 4px;
                                    font-size: 16px;
                                    line-height: 20px;
                                    padding: 9px 16px;
                                    margin-left: 8px;
                                    cursor: pointer;
                                    transition: all .2s ease;
                                    width: 15%;
                                }
                            }
                        }

                        #promo-input:before {
                            content: "";
                            z-index: 9999;
                            display: block;
                            width: 18px;
                            height: 18px;
                            background: url(../assets/ic_check_success.1632c.svg);
                            background-size: contain;
                            position: absolute;
                            left: 338px;
                            top: 9px;
                        }
                    }
                }

                .method {
                    border-top: 1px dashed #E8E7F8;
                    padding-top: 28px;
                    width: 65%;

                    .label {
                        display: flex;
                        align-items: center;

                        h4 {
                            font-size: 16px;
                            color: #222;
                            font-weight: 500;
                            margin-right: 8px;
                            display: flex;
                            align-items: center;
                        }
                    }

                    .payment-method {
                        margin-top: 16px;
                        display: flex;
                        align-items: center;

                        .payment-method-item-checked {
                            box-shadow: inset 0 0 0 1px #4d55e8;
                            border-color: #fff;
                            background: #FBFBFF;
                        }

                        .payment-method-item {
                            display: flex;
                            align-items: center;
                            height: 42px;
                            justify-content: center;
                            position: relative;
                            border: 1px solid #E8E7F8;
                            width: 31%;
                            border-radius: 4px;
                            transition: border .2s ease;
                            cursor: pointer;
                            margin-right: 17px;

                            i {
                                color: #07BB07;
                                font-size: 24px;
                                margin-right: 4px;
                            }

                            .icon-alipay {
                                color: #00a0e9;
                            }

                            .icon-paypal {
                                color: #00a0e9;
                            }

                            span {
                                font-size: 14px;
                                font-weight: 500;
                                color: #333;
                            }

                            label {
                                position: absolute;
                                font-size: 12px;
                                right: -8px;
                                top: -12px;
                                background: #4d55e8;
                                padding: 3px 5px 3px 6px;
                                color: #fff;
                                transform: scale(.9);
                                border-radius: 40px 16px 0 40px;
                                display: none !important;
                            }
                        }

                        .payment-method-item:nth-child(2) {
                            i {
                                color: #00a0e9;
                            }
                        }

                        .payment-method-item:nth-child(3) {
                            i {
                                color: #00a0e9;
                            }
                        }

                        .payment-method-item:last-child {
                            span::after {
                                content: "支持信用卡";
                                display: block;
                                margin-top: 2px;
                                font-size: 12px;
                                color: #666;
                                font-weight: 500;
                            }
                        }
                    }
                }

                .price-list {
                    margin-top: 28px;
                    width: 65%;

                    .item {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-bottom: 8px;
                        font-size: 14px;
                        color: #7b7b7b;

                        .title {
                            font-weight: 400;

                            #vip-days {
                                color: #333;
                                font-size: 15px;
                                font-weight: 500;
                            }

                            #discount-tag {
                                margin-left: 4px;
                                color: #07BB07;
                                font-size: 15px;
                                font-weight: 500;
                            }

                            #promo-discount-ratio {
                                color: #FF5569;
                                font-size: 15px;
                                font-weight: 500;
                            }
                        }

                        #price-code-discount {
                            color: #FF5569;
                            font-size: 15px;
                            font-weight: 500;
                        }

                        #price-plan-discount {
                            color: #FF5569;
                            font-size: 15px;
                            font-weight: 500;
                        }

                        .price-value {
                            color: #333;
                            font-size: 15px;
                            font-weight: 500;
                        }
                    }

                    .final-price {
                        margin-top: 16px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-weight: 500;

                        span {
                            font-size: 18px;
                        }

                        .price-value-total {
                            display: flex;
                            align-items: center;
                            font-weight: 500;
                            font-size: 20px;

                            span {
                                font-size: 18px;
                            }

                            .price-total-small {
                                font-size: 13px;
                                color: #7b7b7b;
                                font-weight: 400;
                            }
                        }
                    }
                }

                .payment-signin {
                    margin-top: 28px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 65%;

                    .payment-btn {
                        padding: 14px 60px;
                        width: 48%;
                        background: #4D55E8;
                        font-size: 15px;
                        font-weight: 500;
                        color: #fff;
                        outline: 0;
                        -webkit-appearance: none;
                        appearance: none;
                        border-radius: 4px;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border: 1px solid #4D55E8;
                    }

                    .signup {
                        background: 0 0;
                        color: #4D55E8;
                    }
                }

                .agreement {
                    margin-top: 24px;
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                    color: #7b7b7b;

                    i {
                        color: #07BB07;
                        margin-right: 4px;
                    }
                }
            }
        }

        .right {
            .buy-compare-btn {
                width: 100%;
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #E8E7F8;
                margin-bottom: 24px;
                cursor: pointer;

                i {
                    font-size: 22px;
                    color: #4D55E8;
                }

                span {
                    padding: 0 16px 0 10px;
                    font-size: 12px;
                }
            }

            .banner {
                background: linear-gradient(
                        92.3deg, #F5EDE0 .43%, #F7D491 111.46%);
                height: 136px;
                background-size: cover;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 34px;
                position: relative;
                border-radius: 6px;

                .title {
                    display: flex;
                    align-items: center;
                    font-size: 18px;
                    font-weight: 500;
                    position: relative;
                    z-index: 10;

                    img {
                        width: 32px;
                    }
                }

                .buy-limit-time {
                    margin-top: 4px;

                    span {
                        display: block;
                        padding-left: 6px;
                        margin-top: 4px;
                        font-size: 15px;
                        color: #333;
                        font-weight: 500;
                    }
                }
            }

            .feature {
                margin-top: 28px;
                border: 1px solid #E8E7F8;
                border-radius: 4px;

                .title {
                    height: 48px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 12px;
                    border-bottom: 1px solid #E8E7F8;

                    div {
                        font-size: 16px;
                        font-weight: 500;
                    }

                    span {
                        font-size: 12px;
                        color: #333;
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                        transition: all .2s ease;

                        i {
                            margin-left: 4px;
                        }
                    }
                }

                .feature-list {
                    display: flex;
                    flex-direction: column;
                    padding: 24px 0 80px;

                    .item {
                        margin-top: 40px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;

                        h5 {
                            margin-top: 12px;
                            font-size: 14px;
                            font-weight: 500;
                        }

                        span {
                            margin-top: 4px;
                            display: block;
                            text-align: center;
                            font-size: 12px;
                            color: #7b7b7b;
                        }
                    }
                }
            }
        }
    }
}
</style>
